@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "@/modules/components/footer_menu.scss";
@import "@/modules/components/header_search.scss";
@import "@/modules/components/mobile_nav.scss";
@import "@/modules/components/currency.scss";
@import "@/modules/components/oem_header.scss";
@import "@/modules/block_product_single.scss";
@import "@/modules/custom_nav_more_link.scss";
@import "@/modules/animation.scss";
@import "@/modules/collection_product.scss";
@import "@/modules/block_slides.scss";
@import "@/modules/block_slogan.scss";
@import "@/modules/block_collection.scss";
@import "@/modules/block_collection_list.scss";
@import "@/modules/block_marquee.scss";
@import "@/modules/block_image_text.scss";
@import "@/modules/block_video_image_text.scss";
@import "@/modules/block_logo_list.scss";
@import "@/modules/block_testimonials.scss";
@import "@/modules/block_newsletter.scss";
@import "@/modules/product_detail.scss";
@import "@/modules/block_rich_text.scss";
@import "@/modules/footer.scss";
@import "@/modules/header.scss";

.html_scroll_none {
  overflow-y: hidden;
}


.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: normal;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  width: 100%;
}

.line-clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
}

.general-price {
  color: var(--buying_parice_color);
  font-weight: bold;
  white-space: nowrap;
}

.general-oldprice {
  text-decoration: line-through;
  font-weight: bold;
  color: var(--original_price_color);
  white-space: nowrap;
}

.public_title {
  font-family: var(--title_font_family);
  font-style: var(--title_font_style);
  font-weight: var(--title_font_weigth);
  letter-spacing: var(--title_letter_spacing);
  font-size: var(--title_font_size);
  line-height: 1;
  @media screen and (max-width: 767px) {
    font-size: 28px;
  }
}

.public_btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 35px;
  box-sizing: border-box;
  border: 2px solid #000;
  border-radius: var(--button_border_radius);
  font-size: var(--general_font_size);
  min-height: 48px;
}

.block_title {
  margin-bottom: 50px;
  h2 {
    font-weight: 600;
    @media (max-width: 767px) {
      font-size: 28px !important;
    }
  }
  .block_detail {
    margin-left: 0;
    margin-right: 0;
    margin-top: 15px;
    font-size: var(--general_font_size);
  }
}
.block_title_custom {
  margin-bottom: 50px;
  h2 {
    color: var(--title_color);
    font-family: var(--title_font_family);
    font-style: var(--title_font_style);
    font-weight: 600;
    letter-spacing: var(--title_letter_spacing);
    font-size: var(--title_font_size);

    @media (max-width: 767px) {
      font-size: 28px !important;
    }
    .title_more {
      padding: 4px 16px;
    }
  }

  .block_detail {
    color: var(--detail_color);
    line-height: 34px;
    margin-top: 15px;
    margin-left: 0;
    margin-right: 0;
    font-size: var(--general_font_size);
  }
}

.swiper_title_wrapper {
  .block_title_custom {
    @media screen and (max-width: 767px) {
      text-align: center !important;
    }
  }
  .right {
    display: none;
    margin-bottom: 30px;
    @media screen and (max-width: 767px) {
      justify-content: center;
      margin-top: 15px;
    }
    .swiper-button-prev,
    .swiper-button-next {
      background-image: none;
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      height: 50px;
      width: 50px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1px solid var(--title_color);
      color: var(--title_color);
      transition: all 0.3s ease 0s;
      &:hover {
        background-color: #f6cb46;
        color: #fff;
        border-color: #f6cb46;
        box-shadow: 0 0.2rem 0.4rem rgba(51,51,51,.2);
      }
    }
  }
}

.product_detail_default,
.block_product_single {
  .swiper-container{
    &>.swiper-wrapper{
      &>.swiper-slide {
        overflow: hidden;
        img{
          border-radius: 30px;
        }
      }
    }
    
  }
  .product-preview-small{
    padding-left: 0;
    padding-right: 0;
  }


 
  .product-swiper-small {
    .swiper-small-item{
      img{
        height: 100%;
        object-fit: cover;
      }
    }
    @media screen and (max-width: 767px) {
      .navigation {
        &.unselectable {
          opacity: 0.6;
        }
      }
    }
  }
  @media screen and (min-width: 768px) {
    .product-swiper-small {
      position: relative;
      .swiper-small-item {
        width: 128px;
        height: 128px;
        padding: 5px;
        border-radius: 5px;
        transition: all 0.3s ease 0s;
        border: 1px solid rgba(51, 51, 51, 0.15);
        &.active {
          border: 1px solid rgba(51, 51, 51, 1);
        }
        &:hover {
          opacity: 0.7;
        }
      }
      &:hover {
        .navigation {
          visibility: visible;
        }
      }
      .navigation {
        height: 50px;
        width: 40px;
        border-radius: 10px;
        background-color: rgba(18, 18, 18, 1);
        flex-shrink: 0;
        box-sizing: border-box;
        position: absolute;
        z-index: 10;
        visibility: hidden;
        &.unselectable {
          opacity: 0.6;
        }
        &[data-type="prev"] {
          left: -25px;
        }
        &[data-type="next"] {
          right: -25px;
        }
        svg {
          color: #fff;
        }
      }
    }
    .product_preview_right,.product_preview_left{
      .product-swiper-small{
        .navigation{
          position: relative;
          svg {
            path{
              fill: #fff;
            }
          }
        }
      }
    }
  }
}

.more_wrapper{
    margin-top: calc(var(--general_layout_spacing) * 0.5);
}


.secondary_btn,.main_btn {
  font-size: var(--general_font_size) !important;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  justify-content: center;
  height: auto;
}

.text-ellipsis2{
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  word-break: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
  overflow: hidden;
}